<template>
    <div class="work">
        <Header></Header>
        <el-row>
            <el-col :span="24">
                <div class="content">
                    <div class="login_box">
                        <div class="login">
                            <div class="title">
                                <span>空间登录</span>
                            </div>

                            <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" class="loginForm"
                                @submit.native.prevent>
                                <el-form-item prop="logName" style="margin-top: 35px;">
                                    <el-input type="text" placeholder="请输入用户名" prefix-icon="el-icon-user"
                                        v-model="loginForm.logName" autocomplete="off"
                                        @input="loginForm.logName=loginForm.logName.replace(/\s+/g,'')"></el-input>
                                </el-form-item>

                                <el-form-item prop="logPws" style="margin-top: 35px;">
                                    <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                                        v-model="loginForm.logPws" autocomplete="off" clearable
                                        @input="loginForm.logPws=loginForm.logPws.replace(/\s+/g,'')"></el-input>
                                </el-form-item>

                                <el-form-item style="margin-top: 35px;">
                                    <el-button native-type="submit" type="primary" style="width: 100%;"
                                        @click="submitForm">立即登录</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <Footer></Footer>
    </div>
</template>

<script>
    import { setCookie,removeCookie,getCookie } from "@/utils/auth";
    import Header from "@c/Header/head";
    import Footer from "@c/Footer/footer";
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                isShowManagement: state => state.commonModule.isShowManagement,
                isManager: state => state.commonModule.isManager,
                messageDot: state => state.commonModule.messageDot,
                userInfo: state => state.userModule.userInfo,
            })
        },
        components: {
            Header,
            Footer
        },
        data() {
            let logName = (rule, value, callback) => {
                if (value == undefined || value == '') {
                    return callback(new Error("请输入用户名"));
                } else {
                    callback();
                }
            };

            let logPws = (rule, value, callback) => {
                if (value == "") {
                    return callback(new Error("请输入密码"));
                } else {
                    callback();
                }
            };

            return {
                loginForm: {
                    logName: "",
                    logPws: ""
                },
                userInfoP: {},
                rules: {
                    logName: [{
                        validator: logName,trigger: "blur"
                    },
                    { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
                    ],
                    logPws: [{
                        validator: logPws,
                        trigger: "blur"
                    }]
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: "正在登录",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.2)"
                        });
                        let loginForm = this.loginForm;
                        this.loginForm.logPws = this.$md5(this.loginForm.logPws)
                        this.$store
                            .dispatch("userModule/login", this.loginForm)
                            .then(res => {
                                if (res.data.code === 200) {
                                    // this.$message.success("登录成功");
                                    this.$store.dispatch("userModule/findByUserIdInfo")
                                    var _this = this
                                    loading.close();
                                    this.$router.replace({
                                        path: "/index"
                                    })
                                } else {
                                    this.$message.error(res.data.msg);
                                    loading.close();
                                    this.$router.push({
                                        path: "/login"
                                    });
                                }
                            })
                            .catch(error => {
                                // this.$message.error("服务器内部错误");
                                loading.close();
                            });
                    } else {
                        return false;
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .work {
        width: 100%;
        min-width: 1100px;

        & .content {
            width: 100%;
            height: calc(100vh - 168px);
            background: url("../assets/img/bg.png") no-repeat;
            background-size: 100%, 100%;

            &>.login_box {
                width: 81%;
                height: 100%;
                margin: 0 auto;
                position: relative;

                &>.login {
                    width: 350px;
                    height: 350px;
                    box-sizing: border-box;
                    padding: 30px;
                    position: absolute;
                    top: 50%;
                    right: 0px;
                    transform: translateY(-50%);
                    background-color: white;

                    &>.title {
                        font-size: 16px;
                        color: #409eff;
                        text-align: left;
                        margin-bottom: 14px;
                    }
                }
            }
        }
    }
</style>